<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/commons::head(blog)}">
</head>
<style>
    #new li, a {
        color: #6d6db4;
        list-style-type: decimal;
    }

    #hot li, a {
        color: #6d6db4;
        list-style-type: decimal;
    }

    #hot, #new li {
        margin: 0px 0px 10px 20px;
    }

    a:hover {
        color: #ff8000;
    }

    #archived li {
        float: left;
        display: flex;
        display: inline-block;
        margin-left: 20px;
    }
    .m{
        margin: 4px;
    }
</style>
<body style="background-image: linear-gradient(500rad,#a8edea,#fed6e3)">
<div th:replace="~{commons/commons::body}"></div>

<div class="layui-row layui-inline layui-col-md7" id="app">
    <div class="layui-col-md-offset4" style="margin-top: 18px" v-for="(item,index) in items">
        <div class="layui-card " style="background-image: linear-gradient(100grad,#a8edea,#fed6e3)">
            <div class="layui-card-header layui-row">
                <span><a :id="item.id" :href="'/articles/showDetail/'+item.id">{{item.title}}</a></span>
                <span class="layui-layout-right layui-inline" style="right: 20px">
                <img alt="查看数量" class="layui-nav-img"
                     src="/static/layui/font/eye.svg" style="width: 20px;height: 15px;margin-right: -4px">
                {{item.viewCounts}}
            </span>
            </div>
            <div class="layui-card-body layui-text">
                <blockquote>
                    &nbsp;&nbsp;&nbsp;&nbsp;{{item.summary.substring(0,400)}}
                </blockquote>
            </div>
            <div class="layui-card-body layui-table-fixed-l" style="padding: 16px 15px;">
                <img alt="作者" class="layui-nav-img" src="/static/img/author.svg" style="width: 20px;height: 40px;margin-right:-2px">{{item.author}}
                <div class="layui-col-xs-offset2 layui-card-body " style="width: 250px;margin:-40px 0 0 100px">
                    <span :id="tag.id" v-for="(tag,index1) in item.tags"
                          class="layui-border-green layui-btn-radius layui-inline layui-btn-xs">{{tag.tagName}}</span>
                </div>
                <span class="layui-layout-right layui-inline" style="right: 15px;margin-top: 25px">
                    <img alt="发布时间" class="layui-nav-img" style="width: 20px;height: 15px;margin-right:-2px"
                         src="/static/layui/font/clock.svg">
                    {{item.createDate}}
                </span>
            </div>
        </div>
    </div>
    <!--分页-->
    <div class=" layui-col-xs-offset4" id="demo2-1" style="margin-top: 18px"></div>
</div>
<div class="layui-col-md3 layui-col-md-offset1">
    <div class="layui-card" style="margin-top: 18px">
        <div class="layui-card-header"
             style="text-align: center;font-weight:bolder;font-size: 30px;font-style: italic">baiyi之路
        </div>
        <div class="layui-card-body"
             style="border-top: green 1px solid;width: 300px;margin: 0 auto;text-align: center">
            <div style="display: flex;justify-content: space-around;font-weight: bolder;font-size: 18px">
                <span> <img alt="坐标" class="layui-nav-img " src="/static/img/location.svg">四川・西昌</span>
                <span> java小菜逼</span>
            </div>
            <br>
            <img alt="2332869185@qq.com" class="layui-nav-img" src="/static/img/QQ.svg">
            <img alt="视频" class="layui-nav-img" src="/static/img/icon_bilibili-circle.svg">
            <br> <br>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">最热标签</div>
        <div class="layui-card-body " id="tag">

            <span class="layui-border-green layui-btn-radius layui-btn-sm" th:id="${tags.get(0).id}"
                  th:text="${tags.get(0).tagName}"></span>
            <span class="layui-border-blue layui-btn-radius layui-btn-lg layui-inline m" th:text="${tags.get(1).tagName}"></span>
            <span class="layui-border-cyan layui-btn-radius layui-btn-sm layui-inline m" th:text="${tags.get(2).tagName}"></span>
            <span class="layui-border-orange layui-btn-radius layui-btn-sm layui-inline m" th:text="${tags.get(3).tagName}"></span>
<!--            <span class="layui-border-red layui-btn-radius layui-btn-sm layui-inline m" th:text="${tags.get(4).tagName}"></span>-->
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header"><img alt="热门" class="layui-nav-img" th:src="@{/static/img/hot.svg}">最热文章</div>
        <div class="layui-card-body">
            <ul id="hot">
                <li th:each="hotArticle:${hotArticles.getData()}">
                    <a th:href="@{/articles/showDetail/{id}(id=${hotArticle.id})}">[[${hotArticle.title}]]</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header"><img alt="新文章" class="layui-nav-img" th:src="@{/static/img/new.svg}">最新文章</div>
        <div class="layui-card-body">
            <ul id="new">
                <li th:each="newArticle:${newArticles.getData()}">
                    <a href="javascript:;" th:href="@{/articles/showDetail/{id}(id=${newArticle.id})}">[[${newArticle.title}]]</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header"><img class="layui-nav-img" th:src="@{/static/img/archived.svg}">文章归档</div>
        <div class="layui-card-body layui-inline">
            <ul id="archived">
                <li th:each="archive:${archives.getData()}" th:id="${archive.id}"><a href="javascript:;" th:if="${archive.year!=null}">[[${archive.year}]]年[[${archive.month}]]月([[${archive.count}]])</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [],
        },
    });
    layui.use(['element', 'laypage', 'layer'], function () {
        let element = layui.element;
        let laypage = layui.laypage;
        let layer = layui.layer;
        let cnt = 0;
        $.ajax({
            type: 'post',
            url: '/articles/cnt',
            async: false,
            success: function (e) {
                cnt = e.data;
                console.log(this.count + "count");
            }
        });
        laypage.render({
            elem: 'demo2-1'
            , count: cnt
            , theme: '#FF5722'
            , limit: 3
            , curr: location.hash.replace('#!fenye=', '') //获取起始页
            , hash: '/next/n' //自定义hash值
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                // if (first) {

                // }
                $.post('/articles/view'

                    , {page: obj.curr, pageSize: obj.limit}
                    , function (result) {
                        let res = result.data;
                        app.items = res;
                        console.log("冲刺！完成我的博客！");
                        // console.log("res" + res);
                        // console.log("长度" + res.length);
                    });
            }
        });
        layer.msg("欢迎来到我的博客");
    });

</script>
</html>